<template>
  <div class="loginLifeGroup" :style="login">
    <!-- life集团项目的登录页面 -->
    <div class="logo_box">
      <div :style="logo"></div>
    </div>
    <el-row class="login_lifegroup">
      <el-row class="login_lifegroup-a">
        <h4 style="word-break: keep-all;">{{loginLifeGroup.loginText}}</h4>
      </el-row>
      <el-row class="login_lifegroup-b">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="80px"
          :label-position="labelPosition"
            class="demo-ruleForm"
        >
          <el-form-item prop="account" :label="loginLifeGroup.loginName" >
            <el-input
              v-model.trim="ruleForm.account"
              :placeholder="loginLifeGroup.loginName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item prop="checkPass" :label="loginLifeGroup.loginPassword">
            <el-input
              v-model.trim="ruleForm.checkPass"
              :placeholder="loginLifeGroup.loginPassword"
              autocomplete="off"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="24" align="right">
                <Kt-button
                type="text"
                  class="forgotBtn1"
                  :size="size"
                  :label="passwordChange.passwordForgot"
                  @click="forgotClick"
                ></Kt-button>
              </el-col>
              </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="13" align="right">
                <Kt-button
                  class="submitBtn boxShadowButton"
                  :size="size"
                  :label="loginLifeGroup.loginIn"
                  @keyup.enter.native.prevent="enterLogin(ruleForm)"
                  :loading="logining"
                  @click="submitForm"
                ></Kt-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import KtButton from "@/components/KtButton";
import login_bg from "../../../assets/lifeGroupimg/login_bg2.png";
import login_logo from "../../../assets/lifeGroupimg/login_logo.png";
import axios from "axios";
export default {
  name: "LoginLifeGroup",
  data() {
    return {
      passwordChange: this.$t("m.passwordChange"), //引入 lang 里面的字符串资源,
      loginLifeGroup: this.$t("m.loginLifeGroup"), //引入 lang 里面的字符串资源,
      size: "medium", //按钮的尺寸
      ruleForm: {
        account: "",
        checkPass: ""
      },
      //login的样式
      login: {
        backgroundImage: "url(" + login_bg + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        width: "100%",
        height: "100%"
      },
      logo: {
        backgroundImage: "url(" + login_logo + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        width: "45%",
        height: "80%",
        margin:"5% auto",
      },
      loginName: "",
      check: true, //true---默认是记住用户名和密码的
      logining: false, //登录按钮的loading
      labelPosition: 'top',
      acceptLanguage: "ja_JP" //数据请求传参需要传的语言  ja_JP----日文
    };
  },
  methods: {
    forgotClick() {
      console.log("push == PasswordForgot");
      let loginName = sessionStorage.getItem("musername");
      if(this.ruleForm.account!=null){
        loginName = this.ruleForm.account;
        window.sessionStorage.setItem("musername", loginName);
      }
      console.log(loginName);
      if (loginName) {
      this.$postForm("uac/auth/queryUserSecurityQuestionList", {
        loginName:loginName
      },this.acceptLanguage).then(res => {
          if (res.result.question1Id) {
            sessionStorage.setItem("jumpPsdForget", true);
            this.$router.push({ path: "/PasswordForgot" });
          } else {
            this.$message({
              type: "error",
              message: this.$t("m.passwordChange").err
            });
          }
        });
      } else {
        this.$message({
          type: "error",
          message: this.$t("m.passwordChange").err1
        });
      }
      // sessionStorage.setItem("jumpPsdForget", true);
      // this.$router.push({ path: "/PasswordForgot" });
    },
    /* 
      登录提交
    */
    submitForm() {
      console.log(this.$refs.ruleForm, "this.$refs.ruleForm", this.check);
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(this.ruleForm);
          this.logining = true;
          var loginParams = {
            username: this.ruleForm.account,
            password: this.ruleForm.checkPass
          };
          this.$postLogin(
            this.ports.loginLifeGroup.login,
            loginParams,
            this.acceptLanguage
          )
            .then(response => {
              console.log(response);
              //对密码进行加密操作 by guo 2020-5-6-17:27 添加
              loginParams.password = this.$Utils.demoRequest(
                JSON.stringify(loginParams.password)
              );
              this.logining = false;
              window.sessionStorage.setItem(
                "Authorization",
                "Bearer " + response.access_token
              );
              
              window.sessionStorage.setItem('ishualong',"false");
              window.sessionStorage.setItem("musername", loginParams.username);
              window.sessionStorage.setItem("mpassword", loginParams.password);
              sessionStorage.setItem(
                "user",
                JSON.stringify(this.ruleForm.account)
              );
              this.getUserData();
              // 在请求成功后把document.onkeydown置为undefined
              document.onkeydown = undefined;
              //this.$router.push({ path: "/RoomGeneralViewManagement" });
              this.$postForm("uac/auth/queryUserSecurityQuestionList", {
                loginName:loginParams.username
                },this.acceptLanguage).then(res => {
                console.log(res.result.userId);
                if (res.result.userId == null) {
                  console.log("res.result.userId == null");
                  this.$router.push({ path: "/Setquestion" });
                } else {
                  this.$message({
                    type: "success",
                    message: this.$t("m.loginLifeGroup").loginSuccess
                  });
                  this.$router.push({ path: "/home" }); //by guo 2020-2-26-11:11修改
                }
              });
              // this.$router.push({ path: "/home" }); //by guo 2020-2-26-11:11修改
              //登录成功后判断是否记住密码，记住密码就设置cookie ,没有就清除cookie值
              console.log(this.check, "this.check");
              if (this.check == true) {
                console.log("check == true");
                //传入账号名，密码，和保存天数3个参数

                //对密码进行加密操作 by guo 2020-5-6-17:27 添加
                this.ruleForm.checkPass = this.$Utils.demoRequest(
                  JSON.stringify(this.ruleForm.checkPass)
                );

                this.setCookie(
                  this.ruleForm.account,
                  this.ruleForm.checkPass,
                  7
                );
                this.check = true;
              } else {
                console.log("清空Cookie");
                //清空Cookie
                this.clearCookie(this.ruleForm.account);
                this.clearCookie(this.ruleForm.checkPass);
                this.check = false;
              }
            })
            .catch(error => {
              this.logining = false;
              window.sessionStorage.setItem("musername", loginParams.username);
              console.log(error);
              if (error.code == 500) {
                this.$message({
                  type: "error",
                  message: error.message
                });
              }
            });
        } else {
          console.log("提交失败!");
          return false;
        }
      });
    },

    //设置cookie值
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date(); //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
      //字符串拼接cookie
      window.document.cookie =
        "userName" +
        c_name +
        "=" +
        c_name +
        ";path=/;expires=" +
        exdate.toGMTString();
      window.document.cookie =
        "userPwd" +
        c_name +
        "=" +
        c_pwd +
        ";path=/;expires=" +
        exdate.toGMTString();
    },

    //清除cookie值
    clearCookie: function(name) {
      this.setCookie(name, "", -1); //修改2值都为空，天数为负1天就好了
    },

    //enter回车登录
    enterLogin(ruleForm) {
      this.submitForm();
    },

    //设置角色roleCode
    getUserData() {
      this.$postForm(
        "omc/group/getUserLongDetail",
        {},
        this.acceptLanguage
      ).then(response => {
        sessionStorage.setItem("roleCode", response.result.roleCode);
      });
    }
  },
  computed: {
    //使用computed计算属性来操作form表单规则的国际化
    rules() {
      //此处的rules 是你声明的名字，参考下图
      var validate_Types = (rule, value, callback) => {
        //登录账号的规则
        if (this.ruleForm.account == "") {
          callback(new Error(this.$t("m.loginLifeGroup.empty")));
        }
        callback();
      };
      return {
        loginLifeGroup: this.$t("m.loginLifeGroup"), //引入 lang 里面的字符串资源,
        //注意此处的return，别忘记了
        account: [
          { required: true, validator: validate_Types, trigger: "blur" }
          // { min: 1, max:15,  message: this.$t("m.loginLifeGroup.length10"), },
        ],
        checkPass: [
          {
            required: true,
            message: this.$t("m.loginLifeGroup.empty"),
            trigger: "blur"
          },
          {
            min: 5,
            max: 10,
            message: this.$t("m.loginLifeGroup.length10"),
            trigger: "blur"
          }
        ]
      };
    }
  },
  created() {
    this.loginName = sessionStorage.getItem("musername");
    var _self = this;
    document.onkeydown = function(e) {
      if (window.event == undefined) {
        var key = e.keyCode;
      } else {
        var key = window.event.keyCode;
      }
      if (key == 13) {
        _self.enterLogin("ruleForm");
      }
    };
  },
  mounted() {
    console.log(this.$route.params, "获取登录账号密码");
    this.ruleForm.account = this.$route.params.username;
    window.sessionStorage.setItem('isLife',true);
    this.ruleForm.checkPass = this.$route.params.password; //退出登录后获取cookie的值，将用户名和密码赋给input框
    console.log(this.ruleForm.account, this.ruleForm.checkPass, this.check);
    
   axios({
    url: 'http://192.168.1.134:8080/banner/selectAll',
    method: 'get',
    headers:{
      Authorization:'1_516194bf34054e1a92579c2e458056b6'
    }
    }).then(res => {
      console.log(res)
    })

  },
  updated() {
    sessionStorage.setItem("check" + this.ruleForm.account, this.check);
  },
  components: {
    KtButton
  }
};
</script>
<style lang="scss" scoped>
.loginLifeGroup {
  position: relative;
  overflow: hidden;
  .logo_box {
    margin-top: 66px;
    width: 90vw;
    height: 240px;
    margin-left: 5vw;
  }
  .login_lifegroup {
    width: 40%;
    position: absolute;
    top: 36%;
    right: 30%;
    .login_lifegroup-a {
      margin-left: 68%;
      color: #3978e9;
      font-size: 20px;
      font-weight: 700;
    }
    .login_lifegroup-b {
      width: 90%;
      // padding: 40px 30px;
      margin: 5%;
      /* 登录按钮  修改样式  添加阴影 */
      .submitBtn {
        width: 180px;
        height: 48px;
        margin-left: 55%;
        border-radius: 15px;
        background: #ff0044;
        font-size: 20px;
        color: #ffffff;
      }
      .forgotBtn1{
        color: #3A77E2 !important;
      }
    }
  }
}
/* 修改element-ui input文本框默认的样式 */
/deep/ .login_lifegroup-b .el-input__inner {
  // border: none !important;
  border-radius: 10px !important;
  border:2px solid #20467A !important;
  // border-bottom: 1px solid #999999 !important;
  background-color: transparent !important;
}

/* 修改每一个form表单小项的margin */
/deep/ .login_lifegroup-b .el-form-item {
  margin-bottom: 20px !important;
}

/* 修改element-ui 表格label的样式 */
/deep/ .login_lifegroup-b .el-form-item__label {
  font-weight: 600;
  padding: 5px !important;
  line-height: 20px !important;
  color: #20467A !important;
}
/deep/ input:-webkit-autofill {
  background-color: #20467A !important;
}
</style>
